<template>
  <div class="chooseAddress flex flex_vertical_center">
    <div class="address_content flex flex_between flex_vertical_center"  v-if="address_has" @click="open = !open">
      <div class="" v-if="defualt_has">
        <p class="address_user margin_left">
          <span class="font-weight">{{addressChoosed.name}} {{addressChoosed.mobile}}</span>
          <span class="address_type" v-if="addressChoosed.type == 1">家里</span>
          <span class="address_type" v-if="addressChoosed.type == 2">单位</span>
          <span class="address_type border_red">默认</span>
        </p>
        <p class="flex flex_vertical_center address_text">
          <img src="../../assets/img/address_blue.png">
          <span>{{addressChoosed.area_info +' '+addressChoosed.position_address + addressChoosed.address}}</span>
        </p>
      </div>
      <div class="flex address_no" v-if="!defualt_has">
        <img src="../../assets/img/address_blue.png">
        <span>无默认地址，请点击选择</span>
      </div>
      <img src="../../assets/img/svg/next.svg">
    </div>
    <div class="address_content flex flex_between flex_vertical_center" v-if="!address_has && defualt_has" @click="toAddAddress()">
      <div class="flex address_no" >
        <img src="../../assets/img/address_blue.png">
        <span>暂无地址,点击添加</span>
      </div>
      <img src="../../assets/img/svg/next.svg">
    </div>
    <mu-bottom-sheet :open.sync="open" class="chooseAddressDiv">
      <mu-list @item-click="closeBottomSheet">
        <div class="address_list positon_re">
          <div class="position_re flex flex_between">
            <mu-button @click='aaaa()' flat>关闭</mu-button>
            <router-link :to="{path: '/qds/addAddress', query: {type:1}}">
              <mu-button flat color="secondary">添加</mu-button>
            </router-link>
          </div>
          <div class="address_every build_order_pading flex flex_column" v-for="(address,index) in addressList" @click="closeAddressChoose(address,index)">
            <p class="flex flex_between build_order_pad">
              <span>{{address.name }}</span>
              <span style="color: #333333">{{address.mobile}}</span>
            </p>
            <p class="build_order_pad">{{address.area_info +address.position_address+ address.address}}</p>
            <div class="flex flex_between build_order_pad">
              <div class="positon_re">
                <input id="item1" type="radio" disabled name="item" value="默认地址" hidden :checked='address.is_default == 1'>
                <label for="item1"></label>
                <span>默认地址</span>
              </div>
            </div>
          </div>
        </div>
      </mu-list>
      <!--<mu-button large color="red">添加地址</mu-button>-->
    </mu-bottom-sheet>
  </div>
</template>

<script>
  export default {
    components: {},
    data(){
      return{
        docked: false,
        open: false,
        position: 'right',
        address_has:true,
        defualt_has:false,
        addressList:[],
        addressChoosed:'',
      }
    },
    mounted(){
      this.initAddressList();
      this.initAddressDefualt();
      this.$nextTick(function () {
        $('.mu-radio-label').css('font-size','14px')
      })
    },
    methods:{
      chooseAddress(type){
        this.open = false;
      },
      initAddressList(){
        this.yesS.addressList(this.$comParams()
        ).then(res => {
          this.addressList = res.data.address_list;
          if(!this.isEmpty(this.addressList) && this.addressList.length > 0 ){
            this.address_has=true;
          }
        })
      },

      initAddressDefualt(){
        this.yesS.getDefaultAddress(
          this.$comParams()
        ).then(res => {
          this.addressChoosed = res.data.info;
          if(!this.isEmpty(this.addressChoosed)){
            this.defualt_has = true;
          }
        })
      },

      closeBottomSheet () {
        this.open = false;
      },
      openBotttomSheet () {
        this.open = true;
      },
      aaaa(){
        this.open = false;
      },
      setDefulatNo(index){
        for(var i=0;i<this.addressList.length;i++){
          this.addressList[i].is_default = 0;
          if(i == index){
            this.addressList[i].is_default = 1;
          }
        }
      },
      closeAddressChoose(obj,index){
        obj.is_default = 1;
        this.setDefulatNo(index);
        this.addressChoosed = obj;
        this.open = false;
        //将当前选中的地址设置为默认地址
        this.yesS.setDefaultAddress(
          this.$combineParams({id:obj.id})
        ).then(res => {

        })
      },
      toAddAddress(){
        this.$router.push({
          path:'/qds/addAddress',
          query:{'type':2}
        })
      }
    },
    watch:{
      addressChoosed:{
        handler(curVal,oldVal){
          this.$emit('childByValue', this.addressChoosed)
          // 子组件通过 $emit触发父组件的方法 increment   还
        },
        deep:true
      }
    },
    components:{

    }
  }
</script>

<style scoped>
  @import "../mall/css/build_order.css";
  .chooseAddress{
    min-height: 76px;
  }
  .address_content{
    width: 100%;
  }
</style>
